<template>
  <jl-base>
    <jl-header>
      <mt-header title="合同" :fixed="true">
        <i slot="right">
          <!--<mt-button>草稿箱</mt-button>-->
          <mt-button @click="newOrder">新增</mt-button>
        </i>
      </mt-header>
    </jl-header>

    <jl-content>

      <div class="list_search_header">
        <input placeholder="搜索合同编号，客户名称等，可模糊搜索" v-model="condition">
        <span @click="search">搜索</span>
      </div>

      <div class="qd_list" v-infinite-scroll="loadMore"
           :infinite-scroll-disabled="loading"
           :infinite-scroll-distance="10">
        <template v-for="item in engineerContracts">
          <div class="qd_item" v-on:click="goModify(item)">
            <div class="qd_header bor_bottom">
              <div class="w12 qd_address">
                <em class="mr5">{{ item['BZMC'] }}</em>{{ item['DLD03MC'] }} - {{ item['DLD07'] }}
              </div>
              <div class="w12 mt10">
                <span class="w06 mt10 tl"><i class="fa fa-file-text mr5"></i>{{ item['HT02'] }}</span>
                <span class="w06 mt10 tr"><i class="fa fa-clock-o mr5"></i>{{ item['HT05'] }}</span>
              </div>
            </div>
            <div class="qd_body">
              <div class="w12 mt10" :class="{'Y':'font_green','N':'font_red'}[item['HT08']]">
                <h3 class="w06">{{item['HT08MC']}}</h3>
                <span class="w06 tr font_gray font_size_small">{{item['HT11']}}</span>
                <span class="w12 font_size_small">{{item['HT09']}}</span>
              </div>
            </div>
          </div>
        </template>
        <jl-bottom-loading :class="{'false':'hide'}[loading]"/>
      </div>

      <div class="tips_no_pro" v-if="this.engineerContracts.length <=  0">
        <div class="tips_no_main">
          <div class="w12 tc font_gray_ccc" style="font-size:50px;"><i class="fa fa-sticky-note-o"></i></div>
          <div class="w12 tc font_size_super mt20 font_gray_ccc">暂无登录单记录</div>
        </div>
      </div>

    </jl-content>
    <jl-footer>

    </jl-footer>
  </jl-base>
</template>

<script>

  export default {
    data() {
      return {
        engineerContracts: [],
        loading: false,
        page_num: 1,
        isEnd: false,
        condition: ''
      }
    },
    methods: {
      loadMore() {
        if (this.isEnd) return
        this.loading = true
        this.page_num++
        this.searchEngineerContract()
      },
      search() {
        this.page_num = 1
        this.engineerContracts = []
        this.searchEngineerContract();
      },
      searchEngineerContract() {
        new Promise((resolve, reject) => {
          this.$engineer.searchEngineerContract({page_num: this.page_num, condition: this.condition})
            .then(v => {
              let engineerContracts = v['engineerContracts'] || []
              if ($Utils.isNull(engineerContracts)) this.isEnd = true
              Array.prototype.push.apply(this.engineerContracts, engineerContracts)
              this.loading = false

              this.$forceUpdate()

              resolve(v)
            })
            .catch(e => {
              this.loading = false

              resolve(e)
            })
        })
      },
      newOrder() {
        this.$router.push('/agent/contract/new')
      },
      goModify(item) {
        this.$router.push({name: 'agent-contract-new', params: {item: item}})
      }
    },
    activated() {
      this.engineerContracts = [];
      this.searchEngineerContract()
    }
  }
</script>

<style scoped>

</style>
